<template>
    <div class="checkbox-grid">
        <div v-for="option in options" :key="`${option.value}-${option.label}`" class="checkbox-item" :class="{
            'checked': isChecked(option.value, option.label),
            'loading': isLoading(option.value, option.label),
            'disabled': isDisabled()
        }">
            =======
            =======
            <div class="item-content">
                <!-- 左侧复选框和标签 -->
                <div class="checkbox-wrapper" @click="handleItemClick(option)">
                    <a-checkbox :value="option.value" :checked="isChecked(option.value, option.label)"
                        :disabled="isDisabled(option.value)" @change="handleChange($event, option)">
                        <span class="checkbox-label" :title="option.label">{{ option.label }}</span>
                    </a-checkbox>
                </div>

                <!-- 右侧开关组 -->
                <div class="switch-group">
                    <a-tooltip title="显示">
                        <a-switch size="small" :checked="getDisplayEnabled(option.value, option.label)"
                            @change="(checked) => handleDisplayChange(checked, option)" />
                    </a-tooltip>
                </div>
            </div>

            <!-- 加载动画 -->
            <div v-if="isLoading(option.value, option.label)" class="loading-overlay">
                <div class="loading-spinner"></div>
            </div>
            >>>>>>> 123
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import type { FilterOption, FilterItem } from '../types';
import '../styles/FilterGrid.css';

const props = defineProps<{
    options: FilterOption[];
    checkedList: FilterItem[];
}>();

const emit = defineEmits<{
    (e: 'change', checked: boolean, value: string, label: string): void;
    (e: 'displayChange', checked: boolean, value: string, label: string): void;
}>();

// 加载状态管理
const loadingItems = ref<Set<string>>(new Set());

const createKey = (value: string, label: string) => `${value}-${label}`;

const isChecked = (value: string, label: string) => {
    return !!props.checkedList.find(item => item.value === value && item.label === label);
};

const isLoading = (value: string, label: string) => {
    return loadingItems.value.has(createKey(value, label));
};

const isDisabled = (value: string) => {
    return false;
};
>>>>>>> 123
=======
const isDisabled = (value: string) => {
    return false;
};
=======
const isDisabled = (value: string) => {
    return false;
};
>>>>>>> 123

const getDisplayEnabled = (value: string, label: string) => {
    const item = props.checkedList.find(item => item.value === value && item.label === label);
    return item?.displayEnabled ?? false;
};

const handleChange = async (e: Event, option: FilterOption) => {
    e.stopPropagation();
    const checked = (e.target as HTMLInputElement).checked;
    await toggleOption(option, checked);
};

const handleItemClick = async (option: FilterOption) => {
    const currentChecked = isChecked(option.value, option.label);
    await toggleOption(option, !currentChecked);
};

const toggleOption = async (option: FilterOption, checked: boolean) => {
    const key = createKey(option.value, option.label);

    if (loadingItems.value.has(key)) {
        return;
    }

    loadingItems.value.add(key);

    try {
        emit('change', checked, option.value, option.label);
    } finally {
        setTimeout(() => {
            loadingItems.value.delete(key);
        }, 300);
    }
};

const handleDisplayChange = (checked: boolean, option: FilterOption) => {
    emit('displayChange', checked, option.value, option.label);
};
</script>

<style scoped>
.checkbox-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkbox-item {
    position: relative;
    padding: 8px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.02);
}

.item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.checkbox-wrapper {
    flex: 1;
    min-width: 0;
    margin-right: 16px;
}

.checkbox-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.switch-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #1890ff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

[data-theme="dark"] .loading-overlay {
    background: rgba(0, 0, 0, 0.4);
}

.checked {
    background-color: rgba(24, 144, 255, 0.1);
}
</style>